<template>
    <div class="body">
        <div class="top">
            <div style="width: 100%; height: 20%; background-color: rgb(72, 176, 247); display: flex; align-items: center; padding-left: 20px;">
                <h1 style="color: white;">我的工作台</h1>
            </div>
            <div style="height: 80%; display: flex; align-items: center;">
                <div class="demo-image__preview" style="margin-left: 20px; height: 70%;">
                    <el-image 
                        style="width: 100%; height: 100%"
                        :src="headImg" 
                        :preview-src-list="headImgList">
                    </el-image>
                </div>
                <div style="border: 1px solid black; height: 70%; width: 80%;">

                </div>
            </div>
        </div>
        <div class="second">
            <div class="today-visits">
                <div class="icon">
                    <i class="el-icon-user" style="font-size: 60px; color: white;"></i>
                </div>
                <div class="data-size">
                    <span style="color: white; font-size: 15px;"> 今日访问量 </span>
                    <span style="color: white; font-size: 30px;"> {{ todayVisits.toLocaleString() }} </span>
                </div>
            </div>
            <div class="yesterday-visits">
                <div class="icon">
                    <i class="el-icon-user" style="font-size: 60px; color: white;"></i>
                </div>
                <div class="data-size">
                    <span style="color: white; font-size: 15px;"> 昨日访问量 </span>
                    <span style="color: white; font-size: 30px;"> {{ yesterdayVisits.toLocaleString() }} </span>
                </div>
            </div>
            <div class="today-sales">
                <div class="icon">
                    <i class="el-icon-shopping-bag-2" style="font-size: 60px; color: white;"></i>
                </div>
                <div class="data-size">
                    <span style="color: white; font-size: 15px;"> 今日销售量 </span>
                    <span style="color: white; font-size: 30px;"> {{ todaySales.toLocaleString() }} </span>
                </div>
            </div>
            <div class="yesterday-sales">
                <div class="icon">
                    <i class="el-icon-shopping-bag-2" style="font-size: 60px; color: white;"></i>
                </div>
                <div class="data-size">
                    <span style="color: white; font-size: 15px;"> 昨日销售量 </span>
                    <span style="color: white; font-size: 30px;"> {{ yesterdaySales.toLocaleString() }} </span>
                </div>
            </div>
        </div>
        <div class="chart">
            <div id="chart-user-visits"></div>
            <div id="chart-sales"></div>
        </div>
    </div>
 
</template>

<script>
import Vue from 'vue'
const echarts = require('echarts')
Vue.prototype.$echarts = echarts

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Home',
    data () {
        return {
            todayVisits: 1000,
            yesterdayVisits: 800,
            todaySales: 312100,
            yesterdaySales: 120800,
            headImg: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            headImgList:[ 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'],
        }
    },
    mounted (){
        this.initChart()
    },
    methods:{
        initChart(){
            const chartVisits = this.$echarts.init(document.getElementById('chart-user-visits'))
            const chartSales = this.$echarts.init(document.getElementById('chart-sales'))
            chartVisits.setOption({
                title: {
                    text: '图书销售量'
                },
                tooltip: {
                    // 鼠标经过显示详细数据
                    trigger: 'axis',
                    axisPointer: { type: 'cross' }
                },
                legend: {
                    data1: [{
                    name: '今年',
                    textStyle: {
                        color: 'red'
                    }
                    }],
                    data2: [{
                    name: '去年',
                    textStyle: {
                        color: 'blue'
                    }
                    }],
                    data3: [{
                    name: '前年',
                    textStyle: {
                        color: 'yellow'
                    }
                    }]
                },
                xAxis: {
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                    name: '时间/月',
                    axisTick: {
                    alignWithLabel: true // x坐标居中
                    }
                },
                yAxis: {
                    name: '销售量/元'
                },
                series: [
                    {
                    name: '今年',
                    type: 'line',
                    data: [150, 230, 224, 218, 135, 147, 260, 224, 218, 300, 147, 300],
                    smooth: true
                    },
                    {
                    name: '去年',
                    type: 'line',
                    data: [150, 15, 224, 700, 135, 147, 500, 224, 218, 135, 500, 260],
                    smooth: true
                    },
                    {
                    name: '前年',
                    type: 'line',
                    data: [25, 230, 224, 218, 135, 450, 260, 224, 218, 200, 147, 260],
                    smooth: true
                    }
                ],
                backgroundColor: 'white', // 设置背景颜色为白色
                grid: {                     // 添加网格配置
                    show: true,             // 显示网格
                    // borderColor: '#f1f1f1', // 网格线颜色
                },
                // width: '60%',  // 设置图表宽度为容器的宽度
                // height: '60%', // 设置图表高度为容器的高度

            })
            chartSales.setOption({
                title: {
                    text: '图书销售量分布',
                    // subtext: 'Fake Data',  // 副标题
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item' // 当鼠标悬停在图表的数据项上时触发显示提示框
                },
                legend: {
                    orient: 'vertical',  // 布局方式为垂直
                    left: 'left'
                },
                series: [
                    {
                    name: '销售量分布',
                    type: 'pie',  // 设置为饼图
                    radius: '70%',  // 半径大小
                    data: [
                        { value: 1048, name: '儿童书籍' },
                        { value: 735, name: '科幻小说' },
                        { value: 580, name: '教育类图书' },
                        { value: 484, name: '艺术类图书' },
                        { value: 300, name: '漫画' }
                    ],
                    emphasis: {  // 设置图表数据项的高亮样式
                        itemStyle: {  // 配置阴影样式
                        shadowBlur: 10, // 模糊度
                        shadowOffsetX: 0,  // 水平偏移
                        shadowColor: 'rgba(0, 0, 0, 0.5)'  // 阴影颜色
                        }
                    }
                    }
                ]
            })
            chartVisits.resize()
            chartSales.resize()
        },
    }
}
</script>

<style scoped>
    .body {
        width: 98%;
        height: 90%;
        margin: 10px;
        background-color: rgb(245, 246, 250);
    }
    .top {
        margin-bottom: 20px;
        width: 100%;
        height: 25%;
        background-color: white;
        border: 1px solid rgb(240, 240, 245);
        box-shadow: 0px 15px 10px -15px rgb(226, 222, 216);
    }
    .second {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 15%;
    }
    .today-visits{
        height: 100%;
        width: 24%;
        display: flex;
        justify-content: space-between;
        background-color: rgb(72, 176, 247);
    }
    .yesterday-visits{
        height: 100%;
        width: 24%;
        display: flex;
        justify-content: space-between;
        background-color: rgb(72, 176, 247);
    }
    .today-sales{
        height: 100%;
        width: 24%;
        display: flex;
        justify-content: space-between;
        background-color: rgb(21, 195, 119);
    }
    .yesterday-sales{
        height: 100%;
        width: 24%;
        display: flex;
        justify-content: space-between;
        background-color: rgb(21, 195, 119);

    }
    .icon{
        height: 100%;
        width: 24%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 5px;
    }
    .data-size {
        height: 100%;
        width: 50%;
        padding: 15% 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-right: 5px;
    }
    .chart{
        display: flex;
        justify-content: space-between;
        width: 100%; 
        height: 53%;
    }
    #chart-user-visits{
        height: 100%;
        width: 48%;
        /* border: 2px solid black; */
        background-color: white;
        border: 1px solid rgb(240, 240, 245);
        box-shadow: 0px 15px 10px -15px rgb(226, 222, 216);
    }
    #chart-sales{
        height: 100%;
        width: 48%;
        /* border: 2px solid black; */
        background-color: white;
        border: 1px solid rgb(240, 240, 245);
        box-shadow: 0px 15px 10px -15px rgb(226, 222, 216);
    }
</style>